import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Sidebar, Toast } from "react-vant";
import axios from "../../http/axios";
import style from "./index.module.scss";
const Index = () => {
  const [active, setActive] = useState(0);
  const [itemData, setItemData] = React.useState([]);
  const [toast, setToast] = useState([]);
  const [datalist, setDatalist] = useState("");
  const navigate = useNavigate();
  const getlist = async () => {
    const res = await axios.get("/api/date");
    const { data } = res.data;

    setItemData(data);
  };
  useEffect(() => {
    getlist();
  }, []);
  const ks = async (v: any) => {
    console.log(v);
    setDatalist(v);
    const res = await axios.get("/api/city", {
      params: {
        keshi: v,
      },
    });
    console.log(res.data);
    setToast(res.data);
  };
  const xq = (id: any) => {
    console.log(id);
    navigate(`/kepuhaoxq/${id}`);
  };
  return (
    <div>
      <Sidebar
        value={active}
        onChange={(v) => {
          setActive(v);
        }}
      >
        {itemData.map((item: any, index: number) => {
          return (
            <Sidebar.Item
              title={item.keshi}
              key={index}
              onClick={() => ks(item.keshi)}
            >
              <div className={style.box}>
                {toast.map((item: any, index) => {
                  return (
                    <div
                      className={style.list}
                      key={index}
                      onClick={() => xq(item.id)}
                    >
                      <div className={style.listitem}>
                        <div>
                          <img src={item.image} alt="" />
                        </div>
                        <div>
                          <div className={style.name1}>
                            {item.name}医生的科普号
                          </div>
                          <span>
                            {item.name} {item.type} {item.keshi} {item.hospital}
                          </span>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </Sidebar.Item>
          );
        })}
      </Sidebar>
    </div>
  );
};
export default Index;
